<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/css/pag.css">
    <link rel="stylesheet" href="/libs/font/iconfont.css">
</head>
<body>
    <!-- header -->
    <header class="header"></header>
    <!-- nav -->
    <nav class="nav"></nav>
    <!-- sidebar -->
    <div class="sidebar">
            <div class="cart">
                    <a href="./shopping.html">
                        <div class="item-icon">
                            <img src="/images/icon-cart-list.png">
                        </div>
                        <p class="text"></p> 
                    </a>   
                </div>
                <ul class="sidebar-ul">
                    <li class="items item">
                        <div class="item-icon">
                            <img src="/images/icon-online-01.png">
                        </div>
                        <p class="text">售前咨询</p>
                        <div class="bg"></div>
                        <div class="detail">
                            <div class="detail-item">
                                <div>
                                    <a class="name" id="YSF-BTN-HOLDERS" href="javascript:;">
                                        <img src="/images/icon-online-05.png" style="width: 23px; height: 23px;">
                                        在线咨询
                                    </a>
                                </div>
                                <p class="time">周一至周六: 9:00-18:00</p>
                            </div>
                            <div class="detail-item">
                                <p class="hotline">热线电话</p>
                                <p class="phone">400-6323-251</p>
                                <p class="time">周一至周六: 9:00-18:00</p>
                            </div>
                        </div>
                    </li>
                    <li class="items item">
                        <div class="item-icon">
                            <img src="/images/icon-online-02.png">
                        </div>
                        <p class="text">售后咨询</p>
                        <div class="bg"></div>
                        <div class="detail">
                            <div class="list">
                                <p class="text1">本商城购买</p>
                                <p class="text2">400-6323-251</p>
                            </div>
                            <div class="list">
                                <p class="text1">非本商城购买</p>
                                <p class="text2">请咨询您所购买的商家</p>
                            </div>
                            <a class="after-sales" href="" target="_blank">点击查看售后网点&gt;&gt;</a>
                        </div>
                    </li>
                    <li class="items item">
                        <div class="item-icon">
                            <img src="/images/icon-online-03.png">
                        </div>
                        <p class="text">官方微信</p>
                        <div class="bg"></div>
                        <div class="detail">
                            <div>
                                <img src="/images/share-weixin-01.jpg" style="width: 139px; height: 139px;">
                            </div>
                            <p class="mall">官方微信</p>
                        </div>
                    </li>
                    <li class="item" id="topBtn">
                        <div class="item-icon">
                            <img src="/images/icon-online-04.png">
                        </div>
                        <p class="text">TOP</p>
                    </li>
                </ul>
    </div>
    <!-- main -->
    <section class="main">
        <div class="content">
          <div class="left">           
              <div class="left-top">
                  <a href="">查看全部</a>&nbsp;&nbsp;&gt;&nbsp;
                  <a href=""> 入耳式 </a> 
              </div>  
              <h4 class="h4-title">连接方式</h4>
              <ul class="left-filter">
                  <li><a href="">手机</a></li>
                  <li><a href="">电脑</a></li>
                  <li><a href="">蓝牙</a></li>
              </ul>
              <h4 class="h4-title">佩戴方式</h4>
              <ul class="left-filter">
                  <li><a href="">头戴式</a></li>
                  <li><a href="">入耳式</a></li>
                  <li><a href="">耳塞式</a></li>
              </ul>
              <h4 class="h4-title">产品特性</h4>
              <ul class="left-filter">
                  <li><a href="">无线</a></li>
                  <li><a href="">可折叠</a></li>
                  <li><a href="">带麦克风</a></li>
              </ul>
              <h4 class="h4-title">价格</h4>
              <div class="list-filter-price-box">
                  <input class="input-text" type="button" value="从高到底">
                  <span class="line">-</span>
                  <input class="input-text" type="button" value="从低到高">
              </div>
        </div>
          <div class="right">
              <div class="right-box">
                  <div class="right-tool">
                      <label class="label-text">排序：</label>
                      <select class="select-text" id="demo" onchange="Sort_Click(this.value)">
                          <option value="">默认</option>
                          <option value="" id="grade">价格由高到低</option>
                          <option value="" id="ascending">价格由低到高</option>
                      </select>
                  </div>
              </div>
              <ul class="page-list" id="lists">
                   
              </ul>
               <script  type="text/html" id="pageTemplate">
                    {{each list item}}
                        <li class="list">
                            <a href="/html/detail.html?id={{item.id}}" target="_blank">
                                <div class="img-wrap"><img alt="随机图片" src="{{item.img}}"></div>
                            </a>
                            <div class="text-wrap">
                                <a href="/html/detail.html?id={{item.id}}" target="_blank">
                                    <p class="names">{{item.name}}</p>
                                    <p class="tool"><span class="price">￥<b>{{item.price}}</b></span></p>
                                </a>
                                <a href="javascript:;">
                                </a>
                                <a href="javascript:;">
                                    <div>
                                        <span class="add-cart"><i class="icon-cart"></i>加入购物车</span>
                                    </div>
                                </a>
                            </div>                   
                        </li>
                        {{/each}}
                </script>
              <div id="pageBox">
                  <span id="prev">上一页</span>
                  <ul id="pageNav">
                   <li></li>
                   <li></li>
                  </ul>
                  <span id="next">下一页</span>

              </div>  
          </div>
        </div>
      </section>
    <!-- footer -->
    <footer class="footer-box"></footer>
</body>
<script src="/libs/require/require.min.js" data-main="/js/page"></script>
</html>